Web Designer Wall es un blog que siempre me ha atraído por su diseño y una de las cosas que más me gusta es el menú tan original con efecto hover (El efecto hover nos permite definir un aspecto determinado cuando situamos el cursor sobre el objeto).


Ha sido creado con Photoshop valiéndose de la ayuda de imágenes vectoriales, yo le veo mucho mérito ya que aún con todas las herramientas a nuestro alcance sin imaginación de poco nos sirve.
El menú trae consigo un fondo por si deseamos añadirlo, esos manitas del Photoshop (que yo sé que hay muchos) lo tienen más sencillo para crear un fondo acorde con su blog así como otras imágenes o de distinto color.


Los que como yo unos aficionadillos tendremos que conformarnos con el menú sin fondo pero tampoco está nada mal que conste.




Para el ejemplo lo he reducido de tamaño pero si queréis ver como quedaría con las medidas que proporciona la autora podéis verlo aquí.
La forma de añadirlo es muy sencilla. Justo antes de ]]></b:skin> añadimos los estilos para el menú.

Ver código


He dejado las imágenes añadidas para facilitar la ubicación de cada una y ver el efecto si decidís probar, pero recomiendo alojarlas en vuestro servidor y sustituirlas, por si en cualquier momento fueran eliminadas.

El siguiente paso es añadir un elemento de página HTML/Javascript y en su interior añadimos:
<ul id="menu">  <li><a href="url-de-la-pagina" class="home">Home <span></span></a></li>  <li><a href="url-perfil" class="about">About <span></span></a></li>  <li><a href="url-del-feed" class="rss">RSS <span></span></a></li></ul>
Ya soló nos queda arrastrar la etiqueta, añadir la url de la página de inicio, el perfil y enlace a nuestro feed.

¿Y eso es todo? no, seguramente las medidas del menú no cuadran bien en tu blog porque quieres añadirlo en la sidebar, puedes hacer esas modificaciones de las medidas en el código que añadimos a la plantilla, por ejemplo:

Color rojo: Puedes cambiar la medida dependiendo el espacio donde se va a añadir el menú-

Color amarillo modifica los valores del tamaño de la imagen.
Color  azul podemos situar la imagen, ubicarla hasta el lugar deseado.

Por último color morado (lila) añadimos imagen de fondo, de no desearla omitimos añadir la url.

Imágenes a descargar:

#menu { (Fondo del menú)

#menu .home {

#menu .home span {

#menu .about {

#menu .about span {

#menu .rss {

#menu .rss span {

También podéis descargarlas de la página del autor en archivo zip.

Y ahora si, ya está completo y podemos empezar.

Anónimo

Hola gema, Tengo un gravísimo problema, no puedo crear entradas...si, así como lees.
la ultima entrada (de aquí en mas la voy a llamar entrada "x") fue hace unos 3 días...que sucede... ayer, quise crear una nueva entrada. Me figuro el conocido cartel, entrada creada correctamente
Ver blog...bien cuando voy a ver el blog, oh sorpresa, figura la entrada "x" y la nueva no, que hice, reinicie la PC, volví a entrar, y seguía allí. Fui a "editar entradas" borre la entrada "X"...dejo de figurarme en la lista, pero cuando voy a "ver blog" SIGUE ALLI!!!!!...y sigo haciendo nuevas entradas pero no se visualizan, solo las puedo ver en "vista previa" y para colmo ni siquiera desaparece del blog la maldita entrada "x". Perdón mi expresión pero estoy cansado y no encuentro solución, espero que me puedas ayudar. Gracias de todos modos

Responder
Anónimo

Hola gema, Tengo un gravísimo problema, no puedo crear entradas...si, así como lees.
la ultima entrada (de aquí en mas la voy a llamar entrada "x") fue hace unos 3 días...que sucede... ayer, quise crear una nueva entrada. Me figuro el conocido cartel, entrada creada correctamente
Ver blog...bien cuando voy a ver el blog, oh sorpresa, figura la entrada "x" y la nueva no, que hice, reinicie la PC, volví a entrar, y seguía allí. Fui a "editar entradas" borre la entrada "X"...dejo de figurarme en la lista, pero cuando voy a "ver blog" SIGUE ALLI!!!!!...y sigo haciendo nuevas entradas pero no se visualizan, solo las puedo ver en "vista previa" y para colmo ni siquiera desaparece del blog la maldita entrada "x". Perdón mi expresión pero estoy cansado y no encuentro solución, espero que me puedas ayudar. Gracias de todos modos

Responder
Susy

Hola Gem@,
te digo que lo que me enviaste va quedando estupendo y el "interesadísimo" contento hasta no más.
Y esto que hoy nos pones aquí jajaja me temo que va a traer también repercusiones.
Abrazos mil.

Responder
Anónimo

Hola Gem@.

Muy bueno, en especial para un minima.

Oye, por estos días espero contar con tu desinteresada ayuda, porque estoy un poco aburrido de ver blogs con la misma imagen que el mio!.

Por lo que estoy comenzando a trabajar en una minima.

Gracias por tanta ayuda y saludos!!!.

Responder
ElRinconDelTaradete

Hola!
¿Me puedes decir como puedo poner un buscador de palabras dentro de mi blog?Muchas gracias!!

Responder
Anónimo

Gema tendré que averiguar qué es la lubina dorada...vuelve con mucha cosecha!!!

Es un menú precioso, delicado, romántico...como lo que me gustan...solo que ahora Pizcos me ayuda a mejorar la plantilla...¿me dirá que es posible ponerlo???...ésto se sabrá en los próximos días...besitos!!!

Responder
Unknown

Hola... he descubierto hoy este blog, me ha encantado, mucho, y ademas veo que podre entrar amplia ayuda para poco a poco ir mejorando el mio. Soy una simplisima autodidacta. Toi aprendiendo aun. Un cordial saludo gema. Regresare.

Responder
Gem@

Anónimo necesito ver tu blog para hacerme una idea del problema :)

Me alegra que todo fuera bien y el autor del blog esté contento Susy :) :)

Birdelo ya sabes donde encontrarme, sólo una cosa antes de hacer nada guarda copia de la plantilla y los elementos de la sidebar.

ElRinconDelTaradete ¿te refieres a un buscador interno? mira mira esta entrada ;)

Graciela me alegra que te guste :)
Yo siempre digo que el blog es como una segunda casa ¿te sentirías bien con muebles a gusto de tu vecino o estarías más cómoda si son de tu agrado?
De todas formas Pizcos no creo que diga añade esto o aquello, él da su opinión y tiene buen gusto que conste.
Pero no sólo eso sino que mira con interés más allá del diseño, si hay buena navegación, localización de etiquetas, la utilidad de buscadores... (todo lo necesario y útil para un blog)

Saludos cordiales y bienvenida LOBITO gracias por comentar :)
(Vi tu mail pero recién he llegado y no he tenido tiempo de contestar)

Responder
Anónimo

oK gEM@, lo tendré siempre pendiente!!!.

Gracias, x/d!!!.

Responder
Unknown

Wola, no sé muy bien dónde preguntarte así q el post más nuevo. Ahí va...

Tengo el problema de q el link a mi blog en otros blogs, en el listado este que muestras las últimas actualizaciones de tus enlaces, no se actualiza, no muestra cual o cuando fue mi última entrada. ¿Podrías indicarme alguna solución para esto?

A parte, me encantaría poner el título del blog en la pestaña del navegador con la frasecilla q se desplaza lateralmente. ¿Sabes cómo se consigue ese efecto?

Muchas gracias por adelantado.

Te enlazo para leerte más seguido.


Bsus de Amp

Responder
marcelo

Hola... quisiera saber si es necesario hacer la "imagen" con fotoshop? o en que formato las guardaste o hiciste. Por que al usar tus direcciones donde halojaste tus "imagenes" me resulta el menú.
Gracias!

Responder
Gem@

Hola Amp te he enviado un mail ;)

Hola marcelo cuanto tiempo sin verte ;)
el menú te resulta porque dejé añadida la url de las imágenes para de esa forma se viera el efecto y lo aplicáis.
La forma de hacerlas puede ser cualquier editor que tengáis y os resulte sencillo crearlas. El formato es .gif
Al final de la entrada he dejado las imágenes de forma que con un clic se pueden visualizar y desde ahí guardar como... de esa forma puedes utilizarlas como plantilla para hacerte una idea ;)
(Me encantaría ver como queda si decides hacerlo)

Responder
Anónimo

si, bastante tiempo. Lo apliqué en blogspot y me resulta con tus código e imagenes. Al usarlo en bligoo no aparecen algunas imagenes, x ejemplo, al poner el cursor sobre "about" aparece solo el "who" y no el "about entre el cuadrado".
Lo que no me queda claro es eso de que en una imagen está el "home" y abajo el "home dentro de un circulo" y aparte el "go to". NO se como discrimina que parte de la imagen mostrar. Hice las imagenes separadas pero les puse .jpg.
Seguir intentándolo.

Responder
Gem@

¿Podría ver como queda en Bligo? eso que me comentas puede ser por el espacio donde lo añades que sea mayor el menú que el espacio del que dispones.
Habría que ir jugando con la medida y "estrecharlo" si te fijas en mi ejemplo d ela entrada verás que es mucho más pequeño que el original que añado en el blog de pruebas.
Respecto a lo de la imagen del home tiene su explicación, pensamos que deberían haber más imágenes pero no es así ya que el efecto hover consiste en mostrar una misma imagen repetida pero con algún añadido.
Es necesario que las dos imágenes estén en el mismo archivo para de esta forma cargue más rápido y el efecto sea inmediato, por eso es necesario que las imágenes queden bien situadas una bajo otra.
No sé si me explique claramente cualquier duda me dices para intentar solucionarlo ;)

Responder
marcelo

En blogspot pude juntar el menú achicarlo al espacio de los articulos como lo hiciste tu, ya que en la parte del titulo no hay html.
Aun no entiendo como es el efecto de que en la misma imagen muestre una vez la parte de arriba y al poner el cursor sobre esa imagen muestre la de abajo.. hover. será por el "left bottom"?

Responder
marcelo

y en bligoo es donde no me resulta.. no muestra la parte de abajo de la imagen. y si aumento la altura height muestra la figura completa. puedo mover las imagenes x,y de izquierda a derecha o mas arriba o mas abajo. Estoy tratando de mezclar ambos CSS.

Responder
Gem@

Así es Mario la posición es lo que consigue el efecto, según la posición que añadimos es la parte que mostrará de la imagen, con display: block; se consigue que el elemento o imagen se comporte como un elemento de bloque.
He buscado un ejemplo, mira este blog y fíjate en la sidebar donde dice Autopromo.Las imágenes da la sensación que son dos y no es así mira aquí la posición para esa imagen es left top.

Responder
Gaviota

Hola Gem@, Llevo dos días intentando agregar el menú en mi minima black, pero no logro que aparezca. ¿Tienes alguna idea de qué estará pasando? ¿Será porque tengo imagen de header y ahora quiero agregar un menú? Te agradezco cualquier ayuda que me puedas brindar.

Responder
Gaviota

Gem@, creo que finalmente lo logré. Gracias por tu colaboración.

Responder
Gem@

yz Gaviota me alegra lo solucionaras :D

Responder
WIÑAYPAQ

Hola, de esa página Web Designer Wall me atrae la ubicación de la fecha, cómo puedo ponerlo alli?

Responder
Gem@

:: ¿Algo así Prodwin?
http://gemablog-.blogspot.com/2009/03/mas-opciones-sobre-la-fecha.html

Responder
MAI

Hola Gema, llevo cotilleando ni se cuánto tiempo por todos lados y creo que ésto es lo que más se parece a lo que quiero hacer ;) a ver si es verdad.
En el blog de pruebas que tú sabes tengo un cartelito "no soy... tengo..." como parte de la foto de la cabecera, que me gustaría enlazar con una página. Ahora mismo hay unos puntos suspensivos que he escrito para ver dónde está la situacion de los códigos que he puesto pero debería cambiarlo por una "zona" en la que poder pinchar. No se si me explico. Sería pasar por encima de la foto y que me dejara clickear.
Puedo aprovechar este código? Al ver que se dan márgenes de alto y ancho me ha dado que pensar :P

Responder
Maite

He intentado ponerte unos códigos aqui pero no me dejaba... que lio tengo encima :$

Responder
Gem@

:: Mándalos al correo Maite :)

Responder
Maite

Qué sería de mi luna sin ti... :D

Responder
Gem@

:: Ohhhh que cosas más lindas me caen de vez en cuando. Gracias Maite pero sería lo mismo y tu lo sabes, hay recursos y gente maravilloso que intenta solucionar los problemas :D

Responder
Maite

Los hay -dudo que con tanta paciencia como tú- pero con quién me lo iba a pasar tan bien como contigo? jajaja hoy no te mando besos sino relinchos.
Ah! y respira, que luego me toca volver a modificar comentarios, sorry, nos vemos por aquella entrada :P

Responder
Gem@

:: jajajajajajaja vale, vale, acepto pulpo como animal de compañía :D

Responder
Maite

Si es que hablo demasiado rapido, cuando soluciono algo estropeo otra cosa :P... he puesto la foto con el link entre la cabecera y el cuerpo del blog y le había dado un margin bottom de -110 para que subiese pero al visualizar el blog hacía un salto tremendo el cuerpo y las entradas mientras se cargaba el blog. Lo he solocionado poniendo ese valor a 0 y el valor negativo se lo he dado al main paper y a la sidebar. Con eso se ve bien en fire pero en IE se nota visualmente el salto al cargar.
¿Puedo arreglarlo de alguna manera?

Responder
Gem@

:: Maite ¿qué versión de Explorer estás usando? con la 8 no veo ese problema :S

Responder
Maite

Con la 8, con la 8 !!! Dale a actualizar, verás. Yo veo que primero se carga el fondo, luego las entradas, que bajan al cargarse la foto de cabecera... y tarda un montón!

Responder
Filigrana

Hola Gema de nuevo! Me vino bárbaro este menú, lo hice con mis propias imágenes, pero necesito 5 links en lugar de 3...probé de formas que me parecierona a mi pero no funciona! :) Alguna pista? Gracias!

Responder
Filigrana

Gema me olvidaba! El blog es http://www.filinueve9.blogspot.com/
Besos!

Responder
Gem@

:: Filigrana ¿es el que tienes añadido? te lo digo porque si es con ese diseño no es necesario que lo hagas siguiendo estos pasos simplemente añadiendo cinco enlaces y el efecto hover con color de fondo:
http://gemablog-.blogspot.com/2009/04/menu-sencillo-efecto-onmouseover.html

Responder
Filigrana

Si! Pasa lo siguiente: yo lo había hecho siguiendo el tutorial tuyo que me pasas ahora, pero después necesité que la letra fuera cursiva, como en la sidebar.
Yo para esa letra estoy usando Sifr que podés usar cualquier tipografía, peero con el menú al usarlo se desactivan los links. Busqué mucho en internet y en todos lados explican que usar sifr trae este inconveniente en los links del menú, y no encuentro solución. Por eso opté por adaptar este menú que ponés aca... en fin, me re extendí jaja. Graciaaas!

Responder
Gem@

:: Entendido entonces Filigrana :D

Responder
Filigrana

:) por eso tanto lío! si me orientás como hacerlo me solucionás un problemón jaja, saludos!

Responder
Gem@

:: En este concreto no sabría decirte Filigrana es muy laborioso por eso no te dije nada :S

Responder
Filigrana

:D Gracias igual Gema! Veré como hago. Saludos!

Responder
Gem@

:: Suerte Filigrana!!

Responder
Felipe Calvo Cepeda

Esta bien bonito este menu... en lo personal considero que es bastante chevere y le da un buen estilo al blog... me has dado la idea para uno que quiero hacer para navidad. :D

Responder
Gem@

:: Pues tendrás que enseñárnoslo Felipe :)

Responder
00

Hola Gem@. Ante todo muchas gracias por el aporte, ya que me está sirviendo de mucha ayuda. Tengo un problema y es que agregué este menu a mi blog cambiando únicamente las imágenes, que se encuentran alojadas en un servidor propio. El caso es, que en mi explorar (Safari) si se ve el menu, pero al usar Firefox no. Dudo de si se verá o no en Internet Explorer, ya que no dispongo de él. Pero bueno, el problema en sí, es que en Firefox no se muestra el menu. Aparece el enlace resaltado si colocas el raton sobre el menu, pero las imágenes no se ven. He buscado por internet y parece que el problema podría ser el CSS pero no estoy seguro... si pudieras ayudarme te lo agradeceria. Un saludo!;)

Responder
00

Hola Gema, soy yo de nuevo. Ya di con el problema, parece que es el servidor donde están alojadas. He optado por subir las imágenes al blog de pruebas y usar la dirección donde se encuentran las imágenes del blog, y ha resultado. Gracias de todos modos ;) Un saludo! Aquí te dejo un enlace, por si quieres ver como queda ;) indiyon.net

Responder
Gem@

:: Me alegra esté resuelto Indiyon :)

Responder
Amiitha Aoi

:D este menú me encantó!!
¿Hay alguna posibilidad de ponerlo en el header?
algo así como en esta web: http://asriel.jp/

ese efecto me encanta ;)

Responder
Gem@

:: Amiitha si te refieres a ese en concreto no creo que sea posible porque ese texto que ves que hace de enlace son imágenes.
Si te refieres a poner un menú a un lado de la cabecera yo creo que lo mejor es dividirla porque de esa forma tendrás un gadget para añadir todo lo que quieras incluido el html de un menú :)

http://gemablog-.blogspot.com/2009/07/header-dividido.html

Responder
Amiitha Aoi

Hola Gem@ :D lo que intento hacer es que este menú quede como header... (el de la otra pag. era solo de ejemplo) pero el problema es que solo puedo agregar una imagen para la cabecera desde el diseño del blog, por eso le preguntaba para sacarme la duda... ahora voy a intentar dividir el header como explica en esa entrada a ver si al fin puedo lograrlo ;) que tenga un buen comienzo de semana~ y gracias por responder ^^

Responder
Gem@

:: Cuando se trata de un menú de texto la cosa es más sencilla, si se trata de añadir este menú lo ideal es tener el header dividido, una parte para la imagen del header y la otra para el menú.

Responder
Anónimo

Hola tengo una pregunta y si envede de poner el rss quiero poner otra cosas como seccion de videos y demas como lo aria por que las secciones que hay no me inetresan.
ESPERO QUE ME AYUDES UN SALUDO

Responder
Gem@

:: Hola Pradu, en este caso como los títulos son imágenes si queremos sustituirlos por otros como por ejemplo los vídeos sería necesario que crearas esas imágenes.

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top